.title {
  margin: 20rpx 29rpx 5rpx;
  padding-bottom: 20rpx;
  font-size: 34rpx;
  font-weight: bold;
  text-align: justify;
  letter-spacing: 2rpx;
  box-shadow: 0rpx 0.2rpx #EAEAEF;
}
@keyframes content-box {
  0% {
    opacity: 0.4;
    transform: translate(150rpx, 0rpx);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes main-text {
  0% {
    opacity: 0.6;
    transform: scale(0, 0);
  }
  100% {
    opacity: 1;
    transform: scale(1, 1);
  }
}
.detail {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 29rpx 29rpx 36rpx;
  font-size: 34rpx;
  line-height: 46rpx;
  overflow-x: hidden;

  .content {
    background-image: linear-gradient(45deg, #0081ff, #1cbbb4);
    margin-bottom: 29rpx;
    display: flex;
    justify-content: space-between;
    border-radius: 16rpx;;
    box-sizing: border-box;
    animation-name: content-box;
    animation-duration: 1s;

    .main {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding: 20rpx 32rpx 0 26rpx;
      background-color: hsl(177, 45%, 60%);
      min-height: 210rpx;
      border-left: 2rpx solid #40BCBF;
      border-top: 2rpx solid #40BCBF;
      border-bottom: 2rpx solid #40BCBF;
      border-top-left-radius: 16rpx;
      border-bottom-left-radius: 16rpx;
      box-sizing: border-box;

      .text {
        position: relative;
        min-height: 70rpx;
        letter-spacing: 1rpx;
        color: #333;
        background-color: #CCE8CF;  // C7EDCC
        margin-bottom: 26rpx;
        padding: 20rpx;
        border-radius: 20rpx;
        box-sizing: border-box;
        transform-origin: right center;
        animation-name: main-text;
        animation-duration: 2s;
        animation-delay: -1s;
      }
      
      .text::after {
        content: " ";
        position: absolute;
        top: 50%;
        left: 100%;
        margin-top: -13rpx;
        border-width: 13rpx;
        border-style: solid;
        border-color: transparent transparent transparent #CCE8CF;
      }
    }

    .right {
      background-color: #1cbbb4;
      color: white;
      display: flex;
      width: 120rpx;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      border-left: 2rpx dotted #f3f3f3;
      border-top: 2rpx solid #40BCBF;
      border-bottom: 2rpx solid #40BCBF;
      border-right: 6rpx solid hsl(181, 60%, 46%);
      border-top-right-radius: 16rpx;
      border-bottom-right-radius: 16rpx;
      box-sizing: border-box;
    }
  }
}